<template>
  <div v-loading="loading" class="list-table">
    <!-- <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('项目类型')" prop="dealName">
        <dict-select
          v-model="params.stageType"
          dictionary="deal_type"
          :clearable="true"
          @change="stageTypeChange"
        />
      </el-form-item>
      <el-form-item :label="$t('负责人')" prop="dealName">
        <UserSelect
          v-model="queryParams.personCharge"
          :placeholder="$t('选择用户')"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle(queryParams.stageType)">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item> -->
    <!-- </el-form> -->
    <el-row v-loading="loadChart">
      <el-col :span="12" style="min-height:300px;">
        <div class="area-header">
          <span class="area-header-title">{{ $t('投资统计') }}</span>
        </div>
        <el-row>
          <el-col :span="24" class="textAlign height2">
            <h1 style="color:rgb(82 217 117)">{{ dealData.count !==undefined && dealData.count !== null?dealData.count + $t('个'): 0 + $t('个') }}</h1>
          </el-col>
          <el-col :span="24" class="textAlign border height">
            {{ $t('项目总数') }}
          </el-col>
          <el-col :span="24" class="textAlign height2">
            <h1 style="color:rgb(245 226 0)">{{ dealData.stageType + $t('万') }}</h1>
          </el-col>
          <el-col :span="24" class="textAlign border height">
            {{ $t('最小项目金额') }}
          </el-col>
          <el-col :span="24" class="textAlign height2">
            <h1 style="color:rgb(225 5 35)">{{ dealData.value + $t('万') }}</h1>
          </el-col>
          <el-col :span="24" class="textAlign height">
            {{ $t('最高项目金额') }}
          </el-col>
        </el-row>
        <!--<Empty :data="chartData">-->
        <!-- <deal-area-bar-chart key="barChart" ref="barChart" height="300px" :chart-data="chartData" @clickHandel="clickHandel" /> -->
        <!--</Empty>-->
      </el-col>
      <el-col :span="12" style="min-height:300px;">
        <div class="area-header">
          <span class="area-header-title">{{ $t('项目数量') }}</span>
        </div>
        <!--<Empty :data="chartData">-->
        <!-- <funnel-view-chart key="funnelViewChart" ref="funnelViewChart" :chart-data="chartData" height="500px" @clickHandel="clickHandel" /> -->

        <!--</Empty>-->
        <Empty :data="chartData.datas">
          <barLineChart ref="barChart" :chart-data="chartData" height="400px" @clickHandel="clickHandel" />
        </Empty>
      </el-col>
    </el-row>
    <!-- <el-row>
      <el-col :span="24">
        <div class="area-header">
          <span class="area-header-title">{{ $t('项目地域详情') }}</span>
        </div>
        <el-table v-loading="loading" tooltip-effect="darkTable" :data="tableList" border max-height="500">
          <el-table-column :label="$t('项目名称')" show-overflow-tooltip align="center">
            <template slot-scope="scope">
              <router-link
                target="_blank"
                :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,companyId:scope.row.companyId, gpId: scope.row.gpId}}"
                class="link_a"
              >{{ scope.row.dealName }}</router-link>
            </template>
          </el-table-column>
          <el-table-column :label="$t('负责人')" align="center" prop="personCharge" width="130" />
          <el-table-column :label="$t('投资金额') + $t('金额单位')" align="center" prop="amountInvestmentEstimate" width="130">
            <template slot-scope="scope">
              <span>{{ moneyFormat(scope.row.amountInvestmentEstimate, 'w') }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('省份')" align="center" prop="areaName" width="130">
            <template slot-scope="scope">
              <span>{{ $t(scope.row.areaName) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row> -->
    <!-- <pagination
      v-show="total>0"
      :total="total"
      :page.sync="params.pageNum"
      :limit.sync="params.pageSize"
      @pagination="pageData"
    /> -->
  </div>
</template>

<script>
    // import funnelViewChart from '@/views/saas/purun/funnel/funnelViewChart'
    import barLineChart from '@/views/chart/barLineChart.vue'
    // import { countDealArea, findByProvinceRegistered } from '@/api/base/deal/dealBase'
    // import { countDealStage } from '@/api/base/deal/dealBase'
    import { purunList } from './funnelJs'
    export default {
      components: {
        barLineChart
      },
      data() {
          return {
            chartData: {
              datas: []
            },
            loadChart: false,
            mapChart: true,
            funnelViewChart: true,
            tableList: [],
            loading: false,
            total: 0,
            typeList: [],
            params: {
              pageNum: 1,
              pageSize: 10,
              areaId: undefined,
              stageType: 0,
              personCharge: 0,
              dealStage: undefined
            },
            // 记录上一次点击事件传的参数值
            previousVal: undefined,
            queryParams: {
              stageType: 0,
              personCharge: 0
            },
            dealData: {
              count: 0,
              stageType: 0,
              value: 0
            }
          }
      },
      created() {
        this.getDicts('deal_type').then(response => {
          this.typeList = response.data
          this.params.stageType = this.typeList[0].dictValue
          this.getList(this.params.stageType)
        })
        // this.pageData()
      },
      methods: {
        getList(stageType) {
          this.loadChart = true
          this.queryParams.stageType = stageType
            purunList(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
              console.log(response)
              this.loadChart = false
              if (response.data !== null && response.data !== undefined) {
                for (var i = 0; i < response.data.length; i++) {
                  if (response.data[i].amount !== null && response.data[i].amount !== undefined) {
                    response.data[i].amount = Math.round(response.data[i].amount / 100) / 100
                  } else {
                    response.data[i].amount = 0
                  }
                  if (response.data[i].stageType !== null && response.data[i].stageType !== undefined) {
                    response.data[i].stageType = Math.round(response.data[i].stageType / 100) / 100
                  } else {
                    response.data[i].stageType = 0
                  }
                  response.data[i].nodeName = this.$t(response.data[i].nodeName)
                  if (response.data[i].nodeName === this.$t('项目储备')) {
                    response.data[i].dataSort = 100
                  }
                  if (response.data[i].nodeName === this.$t('项目入库')) {
                    response.data[i].dataSort = 90
                  }
                  if (response.data[i].nodeName === this.$t('预审')) {
                    response.data[i].dataSort = 80
                  }
                  if (response.data[i].nodeName === this.$t('立项阶段')) {
                    response.data[i].dataSort = 70
                  }
                  if (response.data[i].nodeName === this.$t('立项')) {
                    response.data[i].dataSort = 60
                  }
                  if (response.data[i].nodeName === this.$t('尽调')) {
                    response.data[i].dataSort = 50
                  }
                  if (response.data[i].nodeName === this.$t('尽职调查')) {
                    response.data[i].dataSort = 40
                  }
                  if (response.data[i].nodeName === this.$t('决策阶段')) {
                    response.data[i].dataSort = 30
                  }
                  if (response.data[i].nodeName === this.$t('投决')) {
                    response.data[i].dataSort = 20
                  }
                  if (response.data[i].nodeName === this.$t('签约划款')) {
                    response.data[i].dataSort = 15
                  }
                  if (response.data[i].nodeName === this.$t('签约')) {
                    response.data[i].dataSort = 10
                  }
                  if (response.data[i].nodeName === this.$t('合同划款')) {
                    response.data[i].dataSort = 10
                  }
                  if (response.data[i].nodeName === this.$t('划款')) {
                    response.data[i].dataSort = 5
                  }
                  if (response.data[i].nodeName === this.$t('划款')) {
                    response.data[i].dataSort = 1
                  }
                }
                var chartData = response.data.sort(this.sortArray)
                if (chartData.length > 0) {
                  this.chartData.xLabel = chartData.map(el => this.$t(el.nodeName))
                  this.chartData.legend = true
                  this.chartData.valueFormatter = true
                  this.chartData.barWidth = 20
                  this.chartData.datas = [
                    {
                      type: 'bar',
                      name: '',
                      data: chartData.map(ele => { return { value: ele.amount || 0, name: this.$t(ele.nodeName), count: ele.count, stageType: ele.stageType } })
                    }
                  ]
                } else {
                  this.chartData.datas = []
                }

                this.dealData = chartData[0]
                this.dealData.value = chartData[0].amount
              } else {
                this.chartData.datas = []
              }

              // if (this.chartData) {
              //   this.chartData.forEach(item => {
              //     item.nodeName = this.$t(item.nodeName)
              //   })
              // } else {
              //   this.chartData = []
              // }
            })
            // this.loadChart = false
            // this.chartData = [
            //   {
            //     amount: 12700,
            //     beginTime: null,
            //     count: 111,
            //     endTime: null,
            //     nodeId: '1a512610b61941f4b0bc7c33cb0dd51a',
            //     nodeName: '项目储备',
            //     personCharge: null,
            //     sort: 100,
            //     stageType: 1230
            //   },
            //   {
            //     amount: 20450,
            //     beginTime: null,
            //     count: 234,
            //     endTime: null,
            //     nodeId: '1a512610b61941f4b0bc7c33cb0dd51a',
            //     nodeName: '项目立项',
            //     personCharge: null,
            //     sort: 85,
            //     stageType: 2230
            //   },
            //   {
            //     amount: 32340,
            //     beginTime: null,
            //     count: 432,
            //     endTime: null,
            //     nodeId: '1a512610b61941f4b0bc7c33cb0dd51a',
            //     nodeName: '风控会',
            //     personCharge: null,
            //     sort: 70,
            //     stageType: 3250
            //   },
            //   {
            //     amount: 46580,
            //     beginTime: null,
            //     count: 330,
            //     endTime: null,
            //     nodeId: '1a512610b61941f4b0bc7c33cb0dd51a',
            //     nodeName: '投委会',
            //     personCharge: null,
            //     sort: 55,
            //     stageType: 4460
            //   },
            //   {
            //     amount: 54680,
            //     beginTime: null,
            //     count: 230,
            //     endTime: null,
            //     nodeId: '1a512610b61941f4b0bc7c33cb0dd51a',
            //     nodeName: '项目实施',
            //     personCharge: null,
            //     sort: 40,
            //     stageType: 5370
            //   }
            // ]
            // this.dealData = this.chartData[0]
            // this.dealData.value = this.chartData[0].amount
        },
        sortArray(n1, n2) {
          return n2.dataSort - n1.dataSort
        },
        clickHandel(val) {
          console.log(val)
          this.dealData = val
          // this.loading = true
          // if (val) {
          //   this.params.areaId = val
          // }
          // if (this.previousVal === this.params.areaId && this.params.areaId !== '无') {
          //   this.params.areaId = undefined
          // }
          // this.pageData()
          // this.previousVal = this.params.areaId
        },
        // 点击分页查询
        pageData() {
          this.loading = true
          this.params.personCharge = this.queryParams.personCharge
          // findByNodeId(this.params).then(response => {
          //   this.tableList = response.rows
          //   this.total = response.total
          //   this.loading = false
          // })
        },
        /** 项目类型查询 */
        stageTypeChange(val) {
          this.getList(val)
          this.pageData()
          this.params.areaId = undefined
        },
        /** 搜索按钮操作 */
        queryHandle(stageType) {
          this.queryParams.pageNum = 1
          this.getList(stageType)
          this.pageData()
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.params.areaId = undefined
          this.queryParams.personCharge = undefined
          this.queryParams.stageType = undefined
          this.params.personCharge = undefined
          this.params.stageType = undefined
          this.queryHandle()
        }
      }
    }
</script>

<style scoped>
  .textAlign {
    text-align:center;
  }
  .border {
    border-bottom: 1px solid rgb(199, 221, 247);
  }
  .height {
    height: 40px;
    line-height: 40px;
  }
  .height2 {
    height: 90px;
  }
</style>
